<template >
  <div class="fatherBackground">
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="4">
        <span><router-link  :to="{path:'/monitor'}"><img :src="returnnormalpress" class="returnnormalpress"/></router-link></span>
        <span><img :src="realtimeindex" class="equiplist"/></span>
        <span class="description">监控</span>
      </el-col>
      <el-col :xs="7" :sm="6" :md="18" :lg="18" :xl="21" class="con" >
      </el-col>
    </el-row>
    <div class="curve-containner">
      <div class="outMore">
        <div class="curveTitle">
          参数曲线
        </div>
      </div>
      <el-row>
        <el-col class="rowLeft" :span="6">
          <div class="rowLeftTitle">
            <div class="treeTitle">设备树</div>
            <div class="titleTips">*仅支持同类数据对比</div>
          </div>
          <curve-tree v-on:testShowId="testShowId"></curve-tree>
        </el-col>
        <el-col :span="18">
          <el-tabs class="curveTabs" v-model="activeName" @tab-click="handleClick">
            <!--这里是用e-chart做的，当时不知道vue有自己的图标解决方案，维护建议重构成v-chart，https://v-charts.js.org/#/line，辛苦你了-->
            <el-tab-pane label="实时曲线" name="first">
              <div class="realCurveTitle">
              </div>
              <div class="noCurve" v-show="noRealCurve">
                <img class="noCurveImg" :src="nocurves"/>
                <!-- <div class="noCurvesText1">暂无实时曲线图!</div> -->
                <div class="noCurvesText2">请勾选左侧设备树中参数查看曲线图。</div>
              </div>
              <div v-show="realCurve" id="realmain"></div>
            </el-tab-pane>
            <el-tab-pane label="历史曲线" name="second">
              <div class="historyCurveTitle">
                <div class="timeChoice">
                  选择时间：
                  <el-select v-model="value" @change="choiceChange" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="detailedTime" v-show="detailedTimeShow">
                  <div class="block">
                    <span class="demonstration">开始时间：</span>
                    <el-date-picker
                      v-model="timeValue"
                      type="datetimerange"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button class="realTimeButton" type="primary" @click="queryTime">查询</el-button>
                  </div>
                </div>
              </div>
              <div class="noCurve" v-show="noHistoryCurve">
                <img class="noCurveImg" :src="nocurves"/>
                <div class="noCurvesText1">暂无历史曲线图!</div>
                <div class="noCurvesText2">请勾选左侧设备树中参数查看曲线图。</div>
              </div>
              <div v-show="historyCurve" id="historymain"></div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  // 引入基本模板
  import ElRow from 'element-ui/packages/row/src/row'
  import realtimeindex from '@/assets/home/realtimeindex.png'
  import returnnormalpress from '@/assets/equipv2/returnnormalpress.png'

  var echarts = require('echarts/lib/echarts')

  // 引入折线图等组件
  require('echarts/lib/chart/line')
  require('echarts/lib/chart/bar')
  require('echarts/lib/chart/radar')

  // 引入提示框和title组件，图例
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/legendScroll')// 图例翻译滚动

  import curveTree from './component/curveTree'
  import nocurves from '@/assets/nested/nocurve.png'
  import axios from 'axios'
  export default {
    components: {
      ElRow,
      curveTree
    },
    data() {
      return {
        realtimeindex,
        returnnormalpress,
        nocurves,
        activeName: 'first',
        options: [{
          value: 1,
          label: '半小时'
        }, {
          value: 2,
          label: '1小时'
        }, {
          value: 3,
          label: '1天'
        }, {
          value: 4,
          label: '1星期'
        }, {
          value: 5,
          label: '1个月'
        }, {
          value: 6,
          label: '1季度'
        }, {
          value: 0,
          label: '自定义'
        }],
        value: '半小时',
        timeValue: [],
        realCurveData: {
          lineOne: [],
          lineTwo: [],
          lineThree: [],
          lineFour: [],
          lineFive: []
        },
        historyCurveDataThree: {
          lineOne: [],
          lineTwo: [],
          lineThree: [],
          lineFour: [],
          lineFive: []
        },
        titleName: [],
        realTitleName: [],
        detailedTimeShow: false,
        datatestx: '',
        datatesty: '',
        data: [],
        now: '',
        oneDay: '',
        dateValue: '',
        intervalObj: '',
        getNeedId: '',
        tabIndex: '0',
        realCurve: false,
        noRealCurve: true,
        historyCurve: false,
        noHistoryCurve: true,
        historyCurveBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'get_history_curve',
          datas: [],
          time_mode: 1,
          begin_time: '',
          end_time: ''
        },
        realCurveBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'get_real_time_curve',
          pid: localStorage.getItem('num'),
          datas: []
        }
      }
    },
    created() {
    },
    methods: {
      // 实时历史切换
      handleClick(tab) {
        this.tabIndex = tab.index
        if (this.tabIndex === '0') {
          this.getRealCurve()
          this.A()
        }
        if (this.tabIndex === '1') {
          clearInterval(this.intervalObj)
          this.gethistoryCurve()
        }
      },
      // 树节点选择响应
      testShowId: function(testId) {
        this.getNeedId = testId
        this.realCurveData.lineOne = []
        this.realCurveData.lineTwo = []
        this.realCurveData.lineThree = []
        this.realCurveData.lineFour = []
        this.realCurveData.lineFive = []
        this.realCurveBody.datas = this.getNeedId
        clearInterval(this.intervalObj)
        if (this.getNeedId.length === 0) {
          clearInterval(this.intervalObj)
        }
        if (this.tabIndex === '0') {
          this.getRealCurve()
          this.A()
        }
        if (this.tabIndex === '1') {
          this.gethistoryCurve()
        }
      },
      // 实时曲线
      getRealCurve() {
        axios.post('/data', this.realCurveBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.datas.length === 0) {
            this.realCurve = false
            this.noRealCurve = true
          } else {
            this.realCurve = true
            this.noRealCurve = false
          }
          this.realTitleName = []
          for (let e = 0; e < res.data.datas.length; e++) {
            this.realTitleName.push(res.data.datas[e].name)
          }
          // 一号线
          if (res.data.datas[0]) {
            var temporaryStorage = {
              name: String(new Date(res.data.datas[0].x)),
              value: [res.data.datas[0].x, res.data.datas[0].y]
            }
            this.realCurveData.lineOne.push(temporaryStorage)
            if (this.realCurveData.lineOne.length > 1000) {
              this.realCurveData.lineOne.shift()
            }
          }
          // 二号线
          if (res.data.datas[1]) {
            var temporaryStorageTwo = {
              name: String(new Date(res.data.datas[1].x)),
              value: [res.data.datas[1].x, res.data.datas[1].y]
            }
            this.realCurveData.lineTwo.push(temporaryStorageTwo)
            if (this.realCurveData.lineTwo.length > 1000) {
              this.realCurveData.lineTwo.shift()
            }
          }
          // 三号线
          if (res.data.datas[2]) {
            var temporaryStorageThree = {
              name: String(new Date(res.data.datas[2].x)),
              value: [res.data.datas[2].x, res.data.datas[2].y]
            }
            this.realCurveData.lineThree.push(temporaryStorageThree)
            if (this.realCurveData.lineThree.length > 1000) {
              this.realCurveData.lineThree.shift()
            }
          }
          // 四号线
          if (res.data.datas[3]) {
            var temporaryStorageFour = {
              name: String(new Date(res.data.datas[3].x)),
              value: [res.data.datas[3].x, res.data.datas[3].y]
            }
            this.realCurveData.lineFour.push(temporaryStorageFour)
            if (this.realCurveData.lineFour.length > 1000) {
              this.realCurveData.lineFour.shift()
            }
          }
          // 五号线
          if (res.data.datas[4]) {
            var temporaryStorageFive = {
              name: String(new Date(res.data.datas[4].x)),
              value: [res.data.datas[4].x, res.data.datas[4].y]
            }
            this.realCurveData.lineFive.push(temporaryStorageFive)
            if (this.realCurveData.lineFive.length > 1000) {
              this.realCurveData.lineFive.shift()
            }
          }
          this.realTimeCurve()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 定时器
      A: function() {
        this.intervalObj = setInterval(() => {
          this.getRealCurve()
        }, 1000)
      },
      // 实时曲线
      realTimeCurve() {
        var myChart = echarts.init(document.getElementById('realmain'))
        myChart.setOption({
          title: {
            text: '实时曲线',
            left: '10%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false
            }
          },
          legend: {
            left: 'right',
            data: this.realTitleName
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              realtime: true,
              start: 0,
              end: 100
            }
          ],
          xAxis: {
            type: 'time',
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            }
          },
          series: [{
            name: this.realTitleName[0],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.realCurveData.lineOne
          }, {
            name: this.realTitleName[1],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.realCurveData.lineTwo
          }, {
            name: this.realTitleName[2],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.realCurveData.lineThree
          }, {
            name: this.realTitleName[3],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.realCurveData.lineFour
          }, {
            name: this.realTitleName[4],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.realCurveData.lineFive
          }]
        })
      },
      // 获取历史曲线
      gethistoryCurve() {
        this.historyCurveBody.datas = this.getNeedId
        this.historyCurveBody.begin_time = this.timeValue[0]
        this.historyCurveBody.end_time = this.timeValue[1]
        axios.post('/reports', this.historyCurveBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.datas.length === 0) {
            this.historyCurve = false
            this.noHistoryCurve = true
          } else {
            this.historyCurve = true
            this.noHistoryCurve = false
          }
          this.historyCurveDataThree.lineOne = []
          this.historyCurveDataThree.lineTwo = []
          this.historyCurveDataThree.lineThree = []
          this.historyCurveDataThree.lineFour = []
          this.historyCurveDataThree.lineFive = []
          for (let c = 0; c < res.data.datas.length; c++) {
            if (c === 0) {
              this.historyCurveDataThree.lineOne.push(res.data.datas[0].datas)
              this.historyCurveDataThree.lineOne = this.historyCurveDataThree.lineOne[0]
              for (let a = 0; a < this.historyCurveDataThree.lineOne.length; a++) {
                this.historyCurveDataThree.lineOne[a].name = String(new Date(this.historyCurveDataThree.lineOne[a].name))
                this.historyCurveDataThree.lineOne[a].value[1] = parseFloat(this.historyCurveDataThree.lineOne[a].value[1])
              }
            } else if (c === 1) {
              this.historyCurveDataThree.lineTwo.push(res.data.datas[1].datas)
              this.historyCurveDataThree.lineTwo = this.historyCurveDataThree.lineTwo[0]
              for (let a = 0; a < this.historyCurveDataThree.lineTwo.length; a++) {
                this.historyCurveDataThree.lineTwo[a].name = String(new Date(this.historyCurveDataThree.lineTwo[a].name))
                this.historyCurveDataThree.lineTwo[a].value[1] = parseFloat(this.historyCurveDataThree.lineTwo[a].value[1])
              }
            } else if (c === 2) {
              this.historyCurveDataThree.lineThree.push(res.data.datas[2].datas)
              this.historyCurveDataThree.lineThree = this.historyCurveDataThree.lineThree[0]
              for (let a = 0; a < this.historyCurveDataThree.lineThree.length; a++) {
                this.historyCurveDataThree.lineThree[a].name = String(new Date(this.historyCurveDataThree.lineThree[a].name))
                this.historyCurveDataThree.lineThree[a].value[1] = parseFloat(this.historyCurveDataThree.lineThree[a].value[1])
              }
            } else if (c === 3) {
              this.historyCurveDataThree.lineFour.push(res.data.datas[3].datas)
              this.historyCurveDataThree.lineFour = this.historyCurveDataThree.lineFour[0]
              for (let a = 0; a < this.historyCurveDataThree.lineFour.length; a++) {
                this.historyCurveDataThree.lineFour[a].name = String(new Date(this.historyCurveDataThree.lineFour[a].name))
                this.historyCurveDataThree.lineFour[a].value[1] = parseFloat(this.historyCurveDataThree.lineFour[a].value[1])
              }
            } else if (c === 4) {
              this.historyCurveDataThree.lineFive.push(res.data.datas[4].datas)
              this.historyCurveDataThree.lineFive = this.historyCurveDataThree.lineFive[0]
              for (let a = 0; a < this.historyCurveDataThree.lineFive.length; a++) {
                this.historyCurveDataThree.lineFive[a].name = String(new Date(this.historyCurveDataThree.lineFive[a].name))
                this.historyCurveDataThree.lineFive[a].value[1] = parseFloat(this.historyCurveDataThree.lineFive[a].value[1])
              }
            }
          }
          this.titleName = []
          for (let d = 0; d < res.data.datas.length; d++) {
            this.titleName.push(res.data.datas[d].rid)
          }
          this.historyCurveShow()
        })
          .catch((error) => {
            console.log(error)
            this.historyCurveDataThree.lineOne = []
            this.historyCurveDataThree.lineTwo = []
            this.historyCurveDataThree.lineThree = []
            this.historyCurveDataThree.lineFour = []
            this.historyCurveDataThree.lineFive = []
            this.historyCurve = false
            this.noHistoryCurve = true
          })
      },
      // 种类选择
      choiceChange() {
        if (this.value === 0) {
          this.detailedTimeShow = true
        } else {
          this.detailedTimeShow = false
        }
        this.historyCurveBody.time_mode = this.value
        this.gethistoryCurve()
      },
      queryTime() {
        this.gethistoryCurve()
      },
      // 历史曲线
      historyCurveShow() {
        var myChart = echarts.init(document.getElementById('historymain'))
        myChart.setOption({
          title: {
            text: '历史曲线',
            left: '10%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false
            }
          },
          legend: {
            left: 'right',
            data: this.titleName
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              realtime: true,
              start: 0,
              end: 100
            }
          ],
          xAxis: {
            type: 'time',
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            }
          },
          series: [{
            name: this.titleName[0],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.historyCurveDataThree.lineOne
          }, {
            name: this.titleName[1],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.historyCurveDataThree.lineTwo
          }, {
            name: this.titleName[2],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.historyCurveDataThree.lineThree
          }, {
            name: this.titleName[3],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.historyCurveDataThree.lineFour
          }, {
            name: this.titleName[4],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.historyCurveDataThree.lineFive
          }]
        })
      }
    },
    destroyed: function() {
      clearInterval(this.intervalObj)
    }
  }
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .fatherBackground {
    height: 100%;
    width: 100%;
    float: left;
    background-color: #EFEFEF;

  }
  .seachnav{
    width: 60%;
    height: 50px;
    position: fixed;
    z-index: 2;
    top:0;
    bottom: 0;
    line-height: 55px;
    padding-left: 20px;
    .description{
      font-size: 18px;
      color: #333;
      line-height: 10px;
      padding-left: 10px;
    }
    .returnnormalpress{
      vertical-align: middle;
    }
    .equiplist{
      vertical-align: middle;
      margin-left: 10px;
    }
    .searchinvalid{
      vertical-align: middle;
    }
    .con{
      width: 85%;
      height: 50px;
      float: right;
      margin-right: 20px;
      line-height: 3px;
      padding-left: 0 !important;
      .seachContent{
        font-size:18px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        padding-top: 0px;
        color:rgba(51,51,51,1);
      }
      .seachtitle{
        font-size:12px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(102,102,102,1);
      }
    }
  }
  .curve-containner {
    width: 100%;
    min-height: 500px;
    font-size: 16px;
    color: #0072F3;
  }
  /deep/ .outMore{
    height: 35px;
    padding-top: 2px;
    margin: 25px 20px 0px 20px;
    /*border-bottom: 1px solid #E1E1E1;*/
  }
  /deep/ .curveTitle {
    font-size: 16px;
    height: 16px;
    color: #333333;
  }
  /deep/ .el-tabs__nav-scroll {
   background-color: white;
  }
  /deep/ .el-tabs__nav {
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }
  /deep/ .el-tabs__item.is-active {
    color: #0072F3;
  }
  /deep/ .el-tabs__item:hover {
    color: #0072F3;
  }
  /deep/ .el-tabs__active-bar {
    background: #0072F3;
    color: #0072F3;
    height: 4px;
  }
  /deep/ .curveTabs {
    height: 840px;
    background-color: white;
  }
  /deep/ .el-row {
    margin: 0px 20px 20px 20px;
    /*border: 1px solid #E3E3E3;*/
    height: 50px;
  }
  /deep/ .rowLeftTitle {
    border-bottom:1px solid #E3E3E3;
    height: 50px;
    background-color: white;
  }
  /deep/ .treeTitle {
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #323842;
    height: 14px;
    margin: 17px 0px 0px 20px;
  }
  /deep/ .detailedTime {
    float: left;
    margin-left: 20px;
    font-size: 14px;
    color: #69727E;
  }
  /deep/ .titleTips {
    float: right;
    font-size: 12px;
    color: #69727E;
    height: 12px;
    margin: 20px 20px 0px 0px;
  }
  /deep/ .el-tree {
    /*background: #EAEDF1;*/
  }
  /deep/ .rowLeft {
    /*background: #EAEDF1;*/
    border-right: 1px solid #E3E3E3;
  }
  /deep/ .realCurveTitle {
    width: 100%;
    height: 40px;
  }
  /deep/ .historyCurveTitle {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #E3E3E3;
  }
  /deep/ .timeChoice {
    float: left;
    margin-left: 20px;
    font-size: 14px;
    color: #69727E;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .el-range-separator {
    line-height: 25px;
  }
  /deep/ .el-date-editor .el-range__icon {
    line-height: 25px;
  }
  /deep/ .el-tabs__nav-wrap::after {
    height: 1px;
  }
  /deep/ .demonstration {
    line-height: 25px;
  }
  /deep/ .el-date-editor .el-range__close-icon {
    line-height: 25px;
  }
  /deep/ .realTimeButton {
    height: 30px;
    line-height: 5px;
  }
  /deep/ .noCurve {
    height: 300px;
    width: 300px;
    margin-left: 35%;
    margin-top: 15%;
    float: left;
  }
  /deep/ .noCurveImg {
    text-align: center;
    margin: 0 auto;
    margin-left: 65px;
  }
  /deep/ .noCurvesText1 {
    font-size: 14px;
    text-align: center;
    color: #AAAAAA;
  }
  /deep/ .noCurvesText2 {
    font-size: 16px;
    text-align: center;
    color: #69727E;
  }
  @media screen and (max-width: 1920px){
    #realmain {
      width: 1250px;
      height: 730px;
      margin: auto;
    }
    #historymain {
      width: 1250px;
      height: 730px;
      margin: auto;
    }
  }
  @media screen and (max-width: 1440px){
    #realmain {
      width: 800px;
      height: 730px;
      margin: auto;
    }
    #historymain {
      width: 800px;
      height: 730px;
      margin: auto;
    }
  }
  @media screen and (max-width: 1280px){
    #realmain {
      width: 600px;
      height: 730px;
      margin: auto;
    }
    #historymain {
      width: 600px;
      height: 730px;
      margin: auto;
    }
  }
</style>
